<template>
    <div>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp" >
          <!--v-if = "visible"-->
          <div class="dialog-ctrl" v-show="visible">
            <div class="dialog-content">
              {{txt}}
            </div>
          </div>
      </transition>
    </div>
</template>

<script>
  export default {
    name: "messageDialog",
    props:{
      value: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        visible: this.value,
        txt: '',
        index: 1
      }
    },
    mounted () {
      // this.close();
    },
    methods: {
      close () {
        window.setTimeout(() => {
          this.visible = false;
          //console.log(this.index++);
        }, this.time);
      }
    },
    watch: {
      value: function (val) {
        this.visible = val;
        if (val) {
          this.txt = this.$store.state.messageDialogObj.txt;
          this.time = this.$store.state.messageDialogObj.time;
          this.close();
        }
      },
      visible: function (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>
  .dialog-ctrl{
    position: fixed;
    left: 50%;
    width: 300px;
    height:  auto;
    background-color: rgba(46,56,70,0.85);
    color: #fff;
    padding: 30px;
    margin-left: -150px;
    top: 60px;
    border-radius: 4px;
    z-index: 999;
  }
  .dialog-ctrl .dialog-content{
    text-align: center;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
